<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="title">
          <el-row justify="start">
            <h1 style="margin-top: 20px; margin-left: 10px;">
              EasyBrain
            </h1>
            <a href="/" id="exit">退出登录</a>
          </el-row>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-row class="tac">
            <el-col :span="16">
              <el-menu router :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen()"
                @close="handleClose" ref>
                <el-menu-item index="/home">
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>我的主页</span>
                </el-menu-item>
                <el-menu-item index="/device">
                  <el-icon>
                    <Monitor />
                  </el-icon>
                  <span>设备管理</span>
                </el-menu-item>
                <el-menu-item index="/flow">
                  <el-icon>
                    <document />
                  </el-icon>
                  <span>流程管理</span>
                </el-menu-item>
                <el-menu-item index="/info">
                  <el-icon>
                    <setting />
                  </el-icon>
                  <span>个人信息</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          Main
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { defineComponent, PropType } from 'vue'

interface Menu {
  id: number
  label: string
  link?: string
  children?: Menu[]
}

export default defineComponent({
  name: 'Sidebar',
  activeIndex: '/home',
  props: {
    menu: {
      type: Array as PropType<Menu[]>,
      required: true,
      default: () => []
    }
  },
  methods:{
    handleOpen(){

    },
    handleClose(){

    }
  }
})

</script>
<style>
.title {
  border-bottom: 1px solid black;
}</style>
